.media-container {
  position: relative;
  shadow-box();
  overflow: hidden;
  margin-bottom: 2rem;
}


.player-info {
  color: var(--text-color);
  font-size: $font-size-base;
  min-width: 16.25rem;

  .tabs {
    border: none;
    box-shadow: none;

    .show-btn {
      display: none;
    }

    .tab {
      padding: 0rem;
    }
  }

  .controller {
    font-family-icons();
    cursor: pointer;
    font-size: $font-size-larger;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    .btn {
      color: var(--grey-6);
      width: 18%;

      &:hover {
        color: var(--color-pink);
      }
    }
  }

  .play-pause {
    font-size: 130%;
    &::before {
      @extend .i-circle-play:before;
    }
  }

  .backward {
    &::before {
      @extend .i-backward:before;
    }
  }

  .forward {
    &::before {
      @extend .i-forward:before;
    }
  }

  .volume {
    position: relative;

    &.off::before {
      @extend .i-volume-off:before;
    }
    &.on::before {
      @extend .i-volume-on:before;
    }

    .bar {
      position: absolute;
      height: .25rem;
      background: var(--color-pink-a3);
      bottom: 0;
      left: 0;
      the-transition(.2s, ease-out);
    }

    &.off .bar {
      height: 0;
    }
  }

  .mode {
    &.random::before {
      @extend .i-random:before;
    }
    &.loop::before {
      @extend .i-loop:before;
    }
    &.order::before {
      @extend .i-order:before;
    }
  }

  .playlist {
    border-top: .125rem solid var(--grey-9-a1);
  }

  ol {
    font-size: $font-size-smaller;
    padding: .3125rem 0;
    margin: .625rem 0 0;
    height: 12.5rem;
    overflow-x: scroll;
    counter-reset: counter;
    position: relative;

    &::-webkit-scrollbar {
      width: .1875rem;
      height: .1875rem;
    }

    >li {
      display: flex;
      padding: .3125rem .9375rem .3125rem 1.5625rem;
      cursor: pointer;
      the-transition();
      height: 2rem;
      overflow: hidden;

      &.error {
        opacity: .5;
        text-decoration-line: line-through;
      }

      &::before {
        height: auto;
        background: 0 0!important;
        border: none!important;
        position: relative;
        top: 0!important;
        left: 0!important;
        font-size: inherit;
        line-height: inherit;
        margin-left: -1.25rem;
        width: 1.875rem;
        counter-increment: counter;
        content: counter(counter);
        text-align: right;
        padding-right: .3125rem;
        color: var(--grey-5);
      }

      .info {
        display: block;
        width: 100%;

        span {
          &:nth-child(2) {
            float: right;
            margin-left: .625rem;
            color: var(--grey-5);
          }
        }
      }

      &.current {
        color: var(--primary-color);
        position: relative;

        &::before {
          font-family-icons();
          @extend .i-play:before;
          color: currentColor;
        }

        .progress {
          .bar {
            position: absolute;
            height: 100%;
            background: var(--color-pink-a3);
            top: 0;
            left: 0;
            the-transition(.2s, ease-out);
          }

          &::before {
            content: attr(data-ptime) " / " attr(data-dtime);
            color: var(--grey-5);
            position: absolute;
            right: 0;
            padding: 0 .3rem;
          }

          &.seeking {
            &::before {
              color: currentColor;
            }
          }
        }

        .info {
          padding-right: 5rem;
          user-select: none;

          span {
            &:nth-child(2) {
              display: none;
            }
          }
        }
      }

      &:hover {
        background-color: var(--grey-1-a7);
        &::before {
          color: var(--primary-color);
        }
      }
    }
  }
}


.video {
  border-radius: 0 0 .5rem .5rem;
}

.audio {

  .preview {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.25rem 0;

    +mobile() {
      padding: 1.25rem .625rem 0;
      flex-direction: column;
    }

    .info {
      display: flex;
      flex-direction: column;
      margin-left: .625rem;
      padding: .625rem;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;

      +mobile() {
        margin-left: 0;
      }

      h4 {
        margin: 0;
        text-overflow: ellipsis;
        max-height: 3rem;
        padding: 0;
        overflow: hidden;
      }

      span {
        font-size: $font-size-smallest;
      }
    }

    .lrc {
      max-height: 4rem;
      margin-top: .3125rem;
      font-size: $font-size-smallest;
      position: relative;
      text-align: center;
      overflow: hidden;

      .inner {
        width: 100%;
        transition: all .5s ease-out;
      }

      p {
        font-size: .75rem;
        color: var(--grey-6);
        line-height: 1rem!important;
        height: 1rem!important;
        padding: 0!important;
        margin: 0!important;
        transition: all .5s ease-out;
        opacity: .3;
        overflow: hidden;

        &.current {
          opacity: 1;
          overflow: visible;
          height: auto!important;
          min-height: 1rem;
        }
      }
    }
  }

  .cover{
    position: relative;
    flex-shrink: 0;
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      background: url("../images/play_needle.png") no-repeat center/contain;
      width: 3.4375rem;
      height: 5.1875rem;
      top: -1.5625rem;
      left: -1.5625rem;
      transform: rotateZ(-60deg);
      animation: rotate-needle-pause .5s 1 normal linear forwards;
      transform-origin: .625rem .625rem;
    }

    .disc {
      animation: rotate 20s linear infinite;
      animation-play-state: paused;
      padding: 1.5rem;
      max-height: 144px;

      &::after {
        content: "";
        position: absolute;
        background: url("../images/play_disc.png") no-repeat center/contain;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    img {
      object-fit: contain;
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
    }
  }

  &.playing {
    .cover {
      &::before {
        animation: rotate-needle-resume .5s 1 normal linear forwards;
      }

      .disc {
        animation-play-state: running;
      }
    }
  }
}

.playing {
  .player-info .play-pause {
    &::before {
      @extend .i-circle-pause:before;
    }
  }
}
